import React, { Component } from 'react'
import './index.css'
import { RightOutlined } from '@ant-design/icons';
import { Carousel, Avatar } from 'antd';

export default class List extends Component {
  render () {
    let { text, list } = this.props;
    return (
      <div id="List">
        <p className="title">{text}<RightOutlined /></p>
        <Carousel>
          {list.map(song => (
            <div key={song.resources[0].resourceId}>
              {song.resources.map(songDtl => (
                <div className="songDtl" key={songDtl.resourceId}>
                  <Avatar size={120} src={songDtl.uiElement.image.imageUrl} />
                  <p className="mainTitle">
                    <span>{songDtl.uiElement.mainTitle.title + ' - '}</span>
                    {songDtl.resourceExtInfo.artists.map((ar, index) => (
                      <span key={ar.id}>{index === songDtl.resourceExtInfo.artists.length - 1 ? ar.name : ar.name + '/'}</span>
                    ))}
                  </p>
                </div>
              ))}
            </div>
          ))}
        </Carousel>
      </div>
    )
  }
}
